<script>
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.$watch(
      () => this.$route.matched,
      (newMatched) => {
        this.list = newMatched;
      }
    );
  },
  mounted() {
    this.list = this.$route.matched;
  }
};
</script>

<template>
  <div class="breadcrumb">
    <ul>
      <li><router-link to="/">首页</router-link><span>&nbsp;</span></li>
      <li v-for="(item, index) in list" :key="index">
        <router-link :to="{ path: item.path }">{{ item.meta.title }}</router-link>
        <span v-if="index < list.length - 1">&nbsp;</span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.breadcrumb {
  margin: 8px 0;
  background: url(@/assets/home.svg) no-repeat left center/24px;
  padding: 8px 32px;
}

ul {
  display: flex;
}

li {
  display: flex;
  align-items: center;
  height: 24px;
}

span {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(@/assets/right.svg) no-repeat center center/16px;
}
</style>
